<template>
    <div id="player">

    </div>
</template>
<script>


export default {
    name: 'rtvsRetime',
    props: ["clientId", "hasAudio", "streamType"],
    data: function () {
        return {
            complete: false
        }
    },
    methods: {
        //初始化rtvs
        init() {
            CvNetVideo.Init(document.querySelector("#player"), 4,
                {
                    //cssUrl: "rtvs.css",
                    events: {
                        //截图事件
                        onCapture: this.onCapture,
                        //超时前警告通知
                        timeoutWarning: this.timeoutWarning,
                        //超时警告取消
                        timeoutCanceled: this.timeoutCanceled,
                        //超时通知
                        timeoutClose: this.timeoutClose,
                        //停止播放通知
                        onStop: this.onVideoStop,
                        //服务端通知
                        onServerNotice: this.onServerNotice,
                        //被服务端结束播放通知
                        onEndByServer: this.onEndByServer,
                        //HLS模式播放前通知 可获取RTMP HLS 等URL
                        onHlsPlay: this.onHlsPlay,
                        //当前模式不支持265通知
                        onChangeH265Player: this.onChangeH265Player
                    },
                    seekMode: 0,
                    //初始化完成通知
                    callback: this.onComplete,
                    //启用双击放大单窗口
                    enableDbcZoom: true,
                  

                });

        },

        // Sim: sim卡号
        // Channel: 通道号不支持0
        // streamType: 主子码流 0 主码流 1 子码流
        // hasAudio: 是否打开音频
        // videoId: 窗口ID 0表示当前选中窗口 其他按顺序选择
        // config: 配置项 与Init一致
        // Callback: 回调，暂未使用
        // playermode: 播放模式       
        getRetimePlay() {
            for (var i = 1; i < 5; i++) {
                this.SetOsdText(i)
                CvNetVideo.StartRealTimeVideo(
                    "0" + this.clientId,
                    i,
                    this.streamType == "" ? 0 : 1,
                    this.hasAudio == "" ? false : true,
                    i,
                    { //服务器地址(集群版本之后不需设置，会自动从集群管理获取)
                        clusterHost: "192.112.153.169",
                        //服务器Ws端口 默认18002(集群版本之后不需设置，会自动从集群管理获取)
                        clusterPort: 17000,
                    }, null, 0);
                   
            }

        },
        stopRetimePlay() {
            for (var i = 1; i < 5; i++) {
                CvNetVideo.AVTransferControl("0" + this.clientId, i, "0", "0", "0", i,
                    {
                        //服务器地址(集群版本之后不需设置，会自动从集群管理获取)
                        clusterHost: "192.112.153.169",
                        //服务器Ws端口 默认18002(集群版本之后不需设置，会自动从集群管理获取)
                        clusterPort: 17000,
                    }
                );
            }
        },
        //一些rtvs事件
        SetOsdText(id) {
            CvNetVideo.SetOsdVisible(true, id);
            CvNetVideo.SetOsdColor("#00ff00", id);
            CvNetVideo.SetOsdText(id, "通道" + id);
        },
        onComplete() {
            this.complete = true;
        },
        onCapture(base64png, id, ucVideo) {
            console.log(id + "分屏截图 sim:" + ucVideo.Sim + " Channel:" + ucVideo.Channel);
            //console.log(base64png);
        },
        timeoutWarning(leftMsec, time) {
            //leftMsec 剩余关闭毫秒
            //time     上次有动作时间
            document.title = leftMsec / 1000 + '秒后将自动关闭';
        },
        timeoutCanceled() {
            document.title = oldTitle;
        },
        timeoutClose(time) {
            CvNetVideo.Close(-1);
            alert('长时间无操作，已自动关闭！');
            document.title = oldTitle;
        },
        onVideoStop(id, ucVideo) {

        },
        onServerNotice(type, id, ucVideo) {
            console.log("事件类型:" + type + " videoid:" + id);
        },
        onEndByServer(msg, id, ucVideo) {
            //alert(id + "分屏播放结束，原因：" + msg);
        },
        onHlsPlay(id, ucVideo, hlshttp, hlshttps, rtmpurl, cid, flvhttp, flvhttps) {
            console.log(id, hlshttp, hlshttps, rtmpurl, cid, flvhttp, flvhttps);
        },
        onChangeH265Player(playermode) {
            console.log("当前模式" + playermode + "不支持H265，自动切换软解模式");
        }
    },
    mounted() {
        this.init();
    },
    beforeUnmount() {
        this.stopRetimePlay();  
    },
    watch: {
        clientId() {
            this.stopRetimePlay();
            this.getRetimePlay();
        },
        complete() {
            this.getRetimePlay();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#player {
    width: 100%;
    height: 100%;
}

:deep(.video-osd-text) {
    width: auto;
}

:deep(.video-select){
    border: 2px solid #080808 !important;
  }

:deep(.video-body){
    background:#080808;
}
#canvasWebCodec-0{
    background:#080808;
}
</style>
